<style lang="less">
  @import '../styles/common.less';
  @import '../tables/components/table.less';
</style>
<style>

</style>
<template>
  <div class="schedule-div">
    <Row class="row">
      <Col span="10" class="padding-left-10 list-div">
      <Card>
        <div class="DatePicker-div">
          <DatePicker
              :open="true"
              v-model="DatePickerValue"
              type="date"
              @on-change="handleChange">
            <a href="javascript:void(0)" @click="">
              <template v-if="DatePickerValue === ''"></template>
            </a>
          </DatePicker>
        </div>
      </Card>
      </Col>
      <Col span="14" class="padding-left-10 list-div">
      <Card class="padding-10">
        <div class="table-head">
          <span>{{Datetime}}</span>
          <Button type="primary" class="Button" @click="ExportData()">导出数据</Button>
          <Button type="primary" class="Button" @click="remove()">删除</Button>
          <Button type="primary" class="Button" @click="add()">添加</Button>
        </div>
        <Row class="margin-top-10">
          <Table stripe border :columns="columns" :data="data" @on-row-click="onRowData"
                 @on-selection-change="selectionChange"></Table>
        </Row>
        <div style="margin: 10px;overflow: hidden;height: 36px;">
          <div style="float: right;">
            <Page :total="total" :current="page" @on-change="changePage" show-elevator></Page>
          </div>
        </div>
      </Card>
      </Col>
    </Row>
    <!--详情-->
    <Modal v-model="showCurrentTableData" :width="600" :mask-closable="false" :closable="false"
           class-name="vertical-center-modal" class="Modal-Detail-div">
      <h3 slot="header" style="color:#2D8CF0">详情</h3>
      <Form label-position="top">
        <FormItem label="标题">
          <div class="dataDetail-div" v-text="dataDetail.title"></div>
        </FormItem>
        <FormItem label="标签" v-if="dataDetail.tag">
          <div class="dataDetail-div" v-text="dataDetail.tag"></div>
        </FormItem>
        <FormItem label="状态">
          <div class="dataDetail-div" v-text="dataDetail.is_done==true ? '已完成' : '未完成'"></div>
        </FormItem>
        <FormItem label="开始时间">
          <div class="dataDetail-div" v-text="dataDetail.start_time"></div>
        </FormItem>
        <FormItem label="结束时间">
          <div class="dataDetail-div" v-text="dataDetail.end_time"></div>
        </FormItem>
        <FormItem label="是否全天">
          <div class="dataDetail-div" v-text="reminderObj.all_day==true ? '是' : '否'"></div>
        </FormItem>
        <FormItem label="时间段" v-if="reminderObj.all_day != true">
          <div class="dataDetail-div" v-text="reminderObj.start_HS + ' - ' + reminderObj.end_HS"></div>
        </FormItem>
        <FormItem label="是否提醒">
          <div class="dataDetail-div" v-text="reminderObj.is_remind==true ? '是' : '否'"></div>
        </FormItem>
        <FormItem label="提醒日期" v-if="reminderObj.is_remind == true">
          <div class="dataDetail-div" v-text="remind_date"></div>
        </FormItem>
        <FormItem label="提醒时间" v-if="reminderObj.is_remind == true">
          <div class="dataDetail-div" v-text="remind_time"></div>
        </FormItem>
        <FormItem label="重复" v-if="reminderObj.is_remind == true">
          <div class="dataDetail-div" v-text="remind_circle"></div>
        </FormItem>

        <FormItem label="备注" v-if="dataDetail.remarks">
          <div class="dataDetail-div" v-text="dataDetail.remarks"></div>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="hideDetailModal">取消</Button>
        <Button type="primary" :loading="saveLoading" @click="over()" v-if="dataDetail.is_done != true">完成</Button>
      </div>
    </Modal>
    <!--编辑-->
    <Modal v-model="addCurrentTableData" :width="600" :mask-closable="false" :closable="false"
           class-name="vertical-center-modal" class="Modal-Detail-div">
      <h3 slot="header" style="color:#2D8CF0">编辑</h3>
      <Form label-position="top">
        <FormItem label="标题">
          <Input v-model="addData.title" placeholder="标题"></Input>
        </FormItem>
        <FormItem label="标签">
          <Input v-model="addData.tag" placeholder="标签"></Input>
        </FormItem>
        <FormItem label="日期">
          <DatePicker type="daterange"
                      format="yyyy-MM-dd"
                      :confirm="true"
                      :transfer="true"
                      :editable="false"
                      split-panels
                      placement="bottom-start"
                      placeholder="请选择日期"
                      v-model="addData.DatePickerValue"
                      style="width: 100%;"></DatePicker>
        </FormItem>
        <FormItem label="是否全天">
          <i-switch v-model="addData.all_day" size="large">
            <span slot="open">是</span>
            <span slot="close">否</span>
          </i-switch>
        </FormItem>
        <FormItem label="时间段" v-if="addData.all_day == false">
          <TimePicker type="time"
                      format="HH:mm"
                      :confirm="true"
                      :transfer="true"
                      :editable="false"
                      placement="bottom-start"
                      placeholder="开始时间"
                      v-model="addData.startTime"
                      style="width: 45%; float: left;"></TimePicker>
          <div style="width: 10%;text-align: center; float: left;">-</div>
          <TimePicker type="time"
                      format="HH:mm"
                      :confirm="true"
                      :transfer="true"
                      :editable="false"
                      placement="bottom-start"
                      placeholder="结束时间"
                      v-model="addData.endTime"
                      style="width: 45%; float: left;"></TimePicker>
        </FormItem>
        <FormItem label="备注">
          <Input v-model="addData.remarks" type="textarea" class="textarea_resize"
                 :autosize="{minRows: 3}" placeholder="备注信息"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="hideAddModal">取消</Button>
        <Button type="primary" :loading="saveLoading" @click="save()">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import Cookies from 'js-cookie';
  import Util from '../../libs/util';
  import Utils from '../../libs/mod.utils';
  import String from '../../libs/mod.string';
  import Modal from '../../libs/mod.Modal';
  export default {
    components: {},
    data () {
      return {
        total: 0,
        page: 1,
        size: 10,
        id: '',
        remind_date: '',
        remind_time: '',
        remind_circle: '',
        searchConName: '',
        searchConTel: '',
        showCurrentTableData: false,
        loading: true,
        showCurrentColumns: [],
        editInlineAndCellData: [],
        columns: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            key: 'title',
            title: '标题',
            minWidth: 100,
          },
          {
            key: 'tag',
            title: '标签',
            minWidth: 100,
          },
          {
            key: 'start_time',
            title: '开始时间',
            minWidth: 160,
          },
          {
            key: 'end_time',
            title: '结束时间',
            minWidth: 160,
          },
          {
            key: 'is_done',
            title: '状态',
            minWidth: 100,
            render: (h, params) => {
              return h('div', [
                h('span', params.row.is_done == true ? '已完成' : '未完成')
              ]);
            }
          },
          {
            title: 'Action',
            key: 'action',
            align: 'center',
            minWidth: 100,
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: e => {
                      e.stopPropagation();
                      var data = params.row;
                      this.update(data, params.index);
                    }
                  }
                }, '修改')
              ]);
            }
          }
        ],
        data: [],
        dataDetail: {},
        reminderObj: {},
        initTable: [],
        addCurrentTableData: false,
        saveLoading: false,
        ajaxType: 'add',
        addData: {
          title: '',
          tag: '',
          all_day: false,
          DatePickerValue: [Utils.dateToDate(new Date()), Utils.dateToDate(new Date())],//['2018-06-06', '2018-07-07'],
          TimePickerValue: ['08:30', '17:30'],//['08:30', '17:30'],
          startTime: '',
          endTime: '',
          remarks: '',
        },
        selectionArr: [],
        comePageTime: 0,// 进入页面的时间戳
        demoEvents: [],
        Datetime: '',
        from: '',
        to: '',
        DatePickerValue: '',
      };
    },
    beforeMount: function () {
      var _this = this;
      var comePageTime = _this.comePageTime;
      var timestamp = new Date().getTime();
      _this.comePageTime = timestamp;
    },
    beforeDestroy: function () {
      var _this = this;
      var comePageTime = _this.comePageTime;
      var timestamp = new Date().getTime();
      var type = Util.constant.statistical_type.schedule.id;
      var seconds = Math.ceil((parseInt(timestamp) - parseInt(comePageTime)) / 1000);
      Util.statistical(_this, type, seconds);//保存数据
    },
    created () {
      var _this = this;
      var time = new Date();
      var Datetime = Utils.dateToDate(time);
      _this.Datetime = Datetime;
      _this.from = Datetime + ' 00:00:00';
      _this.to = Datetime + ' 23:59:59';
      _this.getData();

      _this.$nextTick(function () {
        $('.table-head').click();
      });
    },
    methods: {
      handleDayChanged (data) {
        var _this = this;
        if (data.date) {
          var Datetime = Utils.dateToDate(data.date);
          _this.Datetime = Datetime;
          _this.from = Datetime + ' 00:00:00';
          _this.to = Datetime + ' 23:59:59';
          _this.getData();
        }
      },
      handleMonthChanged (data) {
        var _this = this;
        var Monthtime = data.replace(/年/g, '-').trim();
        Monthtime = Monthtime.replace(/月/g, '').trim();
        if (Monthtime) {
          //_this.from = Monthtime + '-01 00:00:00';
          //_this.to = Monthtime + '-31 23:59:59';
        }
      },
      handleChange (Datetime) {
        var _this = this;
        _this.Datetime = Datetime;
        _this.from = Datetime + ' 00:00:00';
        _this.to = Datetime + ' 23:59:59';
        _this.getData();
      },
      getData () {
        var _this = this;
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          page: _this.page,
          size: _this.size,
          from: _this.from,
          to: _this.to,
        };
        var params = {
          url: '/schedule/list',
          type: Util.method.get,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var _data = res.data || [];
            _this.total = res.rows;
            _this.data = _data;
          } else {
            _this.$Message.error('查询信息失败!');
          }
        }
      },
      handleSearch () {
        var _this = this;
        _this.page = 1;
        var searchConName = _this.searchConName;
      },
      changePage (page) {
        var _this = this;
        _this.page = page;
        _this.getData();
      },
      onRowData: function (data, index) {
        var _this = this;
        _this.show(index, data);
      },
      show: function (index, data) {
        var _this = this;
        var id = data.id;
        _this.id = id;
        var reminder = data.reminder;
        if (reminder && reminder != '') {
          var Obj = Util.toJson(reminder);
          var reminder_data = Obj.data;
          if (reminder_data && reminder_data != '') {
            var reminderObj = Util.toJson(reminder_data);
            _this.reminderObj = reminderObj;
            var remind_date = reminderObj.date;
            var remind_time = reminderObj.time;
            var remind_circle = reminderObj.circle;
            switch (remind_date) {
              case -1 :
                remind_date = '从不';
                break;
              case 0 :
                remind_date = '任务发生当天';
                break;
              case 1 :
                remind_date = '1天前';
                break;
              case 2 :
                remind_date = '2天前';
                break;
              case 7 :
                remind_date = '一周前';
                break;
              default :
                break;
            }
            switch (remind_circle) {
              case 'no' :
                remind_circle = '从不';
                break;
              case 'daily' :
                remind_circle = '每天';
                break;
              case 'weekly' :
                remind_circle = '每周';
                break;
              case 'monthly' :
                remind_circle = '每月';
                break;
              case 'yearly' :
                remind_circle = '每年';
                break;
              default :
                break;
            }
            _this.remind_date = remind_date;
            _this.remind_time = remind_time;
            _this.remind_circle = remind_circle;
          }
        }
        _this.dataDetail = data;
        _this.showCurrentTableData = true;
      },
      hideDetailModal: function () {
        var _this = this;
        _this.showCurrentTableData = false;
      },
      // 列表多选 选中数据
      selectionChange: function (selection) {
        var _this = this;
        _this.selectionArr = selection;
      },
      // 隐藏编辑页面
      hideAddModal: function () {
        var _this = this;
        _this.addCurrentTableData = false;
      },
      // 显示添加界面
      add: function () {
        var _this = this;
        var Datetime = Utils.dateToDate(new Date());
        _this.ajaxType = 'add';
        _this.addData.title = '';
        _this.addData.tag = '';
        _this.addData.all_day = false;
        _this.addData.DatePickerValue = [Datetime, Datetime];
        _this.addData.startTime = '';
        _this.addData.endTime = '';
        _this.addData.remarks = '';
        _this.addCurrentTableData = true;
      },
      // 保存数据
      save: function () {
        var _this = this;
        var title = _this.addData.title;
        var tag = _this.addData.tag;
        var all_day = _this.addData.all_day;
        var remarks = _this.addData.remarks;
        var startDate = _this.addData.DatePickerValue[0];
        var endDate = _this.addData.DatePickerValue[1];
        if (!(title && title != '')) {
          _this.$Message.error('请填写标题!');
          return false;
        }
        if (!(startDate && endDate)) {
          _this.$Message.error('请选择日期!');
          return false;
        }
        startDate = Utils.dateToDate(startDate);
        endDate = Utils.dateToDate(endDate);
        var startTime = '';
        var endTime = '';
        var startTimeVal = _this.addData.startTime;
        var endTimeVal = _this.addData.endTime;
        if (all_day == false && startTimeVal && endTimeVal) {
          startTime = startTimeVal;
          endTime = endTimeVal;
        }
        var dataJson = {
          dateId: '',
          timeId: '',
          circleId: '',
          date: '',
          time: '',
          circle: '',
          is_remind: false,
          all_day: all_day,
          start_HS: startTime,
          end_HS: endTime,
        };
        var data = {
          id: _this.id,
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          title: title,
          tag: tag,
          start_time: startDate,
          end_time: endDate,
          remarks: remarks,
          is_remind: false,
          reminder: {
            data: Util.toStr(dataJson)
          },
        };
        var url = '/schedule/add';
        if (_this.ajaxType == 'update') {
          url = '/schedule/update';
        }
        var params = {
          url: url,
          type: Util.method.get,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        _this.saveLoading = true;
        function _successFun(res) {
          _this.saveLoading = false;
          if (res.result == 0) {
            _this.page = 1;
            _this.getData();
            _this.addCurrentTableData = false;
            _this.addData.title = '';
            _this.addData.tag = '';
            _this.addData.all_day = false;
            _this.addData.DatePickerValue = [];
            _this.addData.TimePickerValue = [];
            _this.addData.remarks = '';
          } else {
            _this.$Message.error('保存信息失败!');
          }
        }

      },
      // 显示修改界面
      update: function (data, index) {
        var _this = this;
        _this.ajaxType = 'update';
        var id = data.id;
        _this.id = id;
        _this.addData.title = data.title;
        _this.addData.tag = data.tag;
        _this.addData.remarks = data.remarks;
        _this.addData.DatePickerValue = [data.start_time, data.end_time];
        var reminder = data.reminder;
        if (reminder && reminder != '') {
          var Obj = Util.toJson(reminder);
          var reminder_data = Obj.data;
          if (reminder_data && reminder_data != '') {
            var reminderObj = Util.toJson(reminder_data);
            _this.addData.all_day = reminderObj.all_day;
            if (reminderObj.all_day == false && reminderObj.start_HS && reminderObj.end_HS) {
              _this.addData.startTime = reminderObj.start_HS;
              _this.addData.endTime = reminderObj.end_HS;
            }
          }
        }
        _this.addCurrentTableData = true;
      },
      // 完成
      over: function () {
        var _this = this;
        var data = {
          id: _this.id,
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          status: 'done',
        };
        var params = {
          url: '/schedule/update',
          type: Util.method.get,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        _this.saveLoading = true;
        function _successFun(res) {
          _this.saveLoading = false;
          if (res.result == 0) {
            _this.getData();
            _this.showCurrentTableData = false;
          } else {
            _this.$Message.error('提交失败!');
          }
        }
      },
      // 删除
      remove: function () {
        var _this = this;
        var selectionArr = _this.selectionArr;
        if (selectionArr.length == 0) {
          _this.$Message.error('请填选择要删除的数据!');
          return false;
        }
        var selectionIds = [];
        for (var k in selectionArr) {
          if (!selectionArr[k]) {
            continue;
          }
          var id = selectionArr[k].id;
          selectionIds.push(id);
        }
        Modal.confirm(_this, {content: '确定删除选中的信息？'}, function () {
          var data = {
            id: selectionIds,
          };
          var params = {
            url: '/schedule/delete',
            type: Util.method.get,
            data: data,
            success: _successFun
          };
          Util.ajax(_this, params);
          function _successFun(res) {
            if (res.result == 0) {
              _this.page = 1;
              _this.getData();
            } else {
              _this.$Message.error('删除信息失败!');
            }
          }
        }, function () {
        });
      },
      // 导出
      ExportData: function () {
        var _this = this;
        var fields = [
          {
            field: 'id',
            title: '#',
            type: 'int',
            order: 1,
          },
          {
            field: 'title',
            title: '标题',
            type: 'varchar',
            order: 2,
          },
          {
            field: 'tag',
            title: '标签',
            type: 'varchar',
            order: 3,
          },
          {
            field: 'start_time',
            title: '开始时间',
            type: 'datetime',
            order: 4,
          },
          {
            field: 'end_time',
            title: '结束时间',
            type: 'datetime',
            order: 5,
          },
          {
            field: 'done',
            title: '状态',
            type: 'varchar',
            order: 6,
          },
          {
            field: 'remarks',
            title: '备注',
            type: 'varchar',
            order: 7,
          },
        ];
        var fieldsStr = Util.toStr(fields);
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          type: 'schedule',
          fields: fieldsStr,
        };
        var params = {
          url: '/file/db2excle',
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var url = res.data;
            var date = Utils.dateToDateString(new Date());
            Utils.DownloadFile(url, '导出日程_' + date + '.xlsx');
          } else {
            _this.$Message.error('导出信息失败!');
          }
        }
      },
    }
  };
</script>
